import React from 'react';
import './Topic.css';

export default function Topic(props) {
  let title = '';
  if(Array.isArray(props.title)) {
    title = props.title.map(t => {
      return (
        <h2>{ t }</h2>
      );
    });
  }
  else {
    title = <h2>{ props.title }</h2>;
  }
  let list = props.words? props.words.map((word, index) => (
    <li className="topic-item" key={'topic-' + index}>{ (props.order && props.words.length > 1? (index + 1 + '. '): '') + word }</li>
  )): '';
  return (
    <div className="topic-box">
      <div className="topic-title">
        { title }
      </div>
      <ul className="topic-list">
        { list }
      </ul>
    </div>
  )
}

